<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>物资规格需要跟现有物资规格匹配</span>
              <div style="float: right;">
                <el-button type="primary" size="small">提交</el-button>
                <el-button type="danger" icon="el-icon-plus" @click="add" size="small">新增规格</el-button>
              </div>
            </div>
            <el-table :data="this.tableData" ref="table" stripe>
                <tr v-for="(item, index) in this.tableLabel" :key="index">
                    <el-table-column v-if="item.type==='radio'" align="center" width="55" label="单选" fixed="left">
                        <template slot-scope="scope">
                            <el-radio :label="(scope.$index+1)" v-model="radioId" @change.native="getCurrentRow(scope.$index+1,scope.row)">&nbsp;</el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column v-else-if="item.type==='createTime'" :prop="item.prop" :label="item.label" :min-width="item.width" :formatter="formatDate"></el-table-column>
                    <el-table-column v-else-if="item.type==='normal'" :prop="item.prop" :label="item.label" :min-width="item.width"></el-table-column>
                </tr>
            </el-table>
          </el-card>
          
          <el-dialog title="添加规格" :visible.sync="visible" width="400px" append-to-body :close-on-click-modal="false">
            <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
                <el-form-item label="活动名称" prop="skus" :rules="[{ required: true, message: '请输入法人姓名', trigger: 'blur' }]">
                  <el-input v-model="ruleForm.skus"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="visible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submitAddSkus('ruleForm')">提交</el-button>
            </div>
          </el-dialog>

    </div>
</template>

<script>
    import moment from 'moment'
    import { saveSupplierSpec } from "@/api/supplier_api"
    export default {
        props: {
            tableData: {
              type: Array,
              default: () => {
                  return [];
              }
            },
            tableLabel:{
              type: Array,
              default: () => {
                  return [];
              }
            },
            models: {
              type: Object,
              default: () => {
                  return null;
              }
            },
        },
        data() {
            return {
                radioId:'',
                ruleForm:{skus:''},
                visible:false
            };
        },
        mounted(){
        },
        methods: {
            formatDate(row, column) {
                const date = row[column.property]
                if (date == undefined) {
                return ''
                }
                return moment(date).format("YYYY-MM-DD  HH:mm:ss")
            },
            //新增规格
            add(){
                this.ruleForm.skus = '';
                this.visible = true;
            },
            submitAddSkus(formName){
                this.$refs[formName].validate(async(valid) => {
                    if (valid) {
                        const params = {
                        }
                       const {code} = await saveSupplierSpec();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //单选
            getCurrentRow(index,row){
                this.radioId=index;
                this.ids = [row];
            },
            materialSubmit(row){
                if(this.ids.length ==0){
                    return this.$message.error('最少勾选一个规则！');
                }
                if(this.models.ids){//匹配规格
                    this.ids.push(this.models.ids)
                }
                this.$emit("on-check-click", this.ids);
                this.clearInfo();
            },
           
            onClose() {
                this.radioId = "";
                this.$emit("on-cancel");
            }
        }
    };
    </script>
    
    